<template>
  <div>
<!--    @tab-click="handleClick"-->
    <el-tabs v-model="activeName"  @tab-click="handleClick" >
      <el-tab-pane label="数据概览" name="1">
        <div class="shuoming_div">
          <span>关键数据</span>
          </div>
        <div>
          <div class="data_column">
            <div class="data_title">
              <span>昨日新增学习数</span>
            </div>
            <div class="data_num">
              <span style="font-size: 30px;font-weight: bold;font-family: 'initial'">{{lastCount}}</span>
            </div>
          </div>
          <div class="data_column">
            <div class="data_title">
              <span>总学习人数</span>
            </div>
            <div class="data_num">
              <span style="font-size: 30px;font-weight: bold;font-family: 'initial'">{{total}}</span>
            </div>
          </div>
        </div>
        <div  class="shuoming_div">
          <span>数据趋势图</span>
        </div>
        <div>
          <div style="text-align: left">
            <el-form label-position="left">
              <el-form-item label="天数">
                <el-radio-group @change="getStudyAna" v-model="day" size="small" text-color="#FFF" fill="rgba(240,20,20,.8)" style="border: 0px">
                  <el-radio-button label="7"></el-radio-button>
                  <el-radio-button label="15"></el-radio-button>
                  <el-radio-button label="30"></el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div id="show_trend" style="width: 100%;height: 300px">
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="课程详情" name="0">
        <div style="text-align: left;margin-bottom: 20px">
          <el-form label-position="left">
            <el-form-item label="课程">
              <el-select  v-model="selectCourseId" @change="toDoDetail" filterable placeholder="请选择">
                <el-option
                  v-for="item in courseData"
                  :key="item.courseId"
                  :label="item.title"
                  :value="item.courseId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <div class="shuoming_div">
            <span>关键数据</span>
          </div>
          <div>
            <div class="data_column">
              <div class="data_title">
                <span>昨日新增学习数</span>
              </div>
              <div class="data_num">
                <span style="font-size: 30px;font-weight: bold;font-family: 'initial'">{{courseDetailLastCount}}</span>
              </div>
            </div>
            <div class="data_column">
              <div class="data_title">
                <span>总学习人数</span>
              </div>
              <div class="data_num">
                <span style="font-size: 30px;font-weight: bold;font-family: 'initial'">{{courseDetailTotal}}</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div  class="shuoming_div">
            <span>学习情况</span>
          </div>
          <div>
            <div class="drawDiv" >
              <div id="sexAna" style="width: 100%;height: 100%"></div>
            </div>
            <div class="drawDiv" >
              <div  id="progressAna" style="width: 100%;height: 100%"></div>
            </div>
          </div>
        </div>
        <div style="text-align: left">
          <div  class="shuoming_div">
            <span>新增学习人数</span>
          </div>
          <el-form label-position="left">
            <el-form-item label="天数">
              <el-radio-group @change="getStudyAnaDetail" v-model="detailDay" size="small" text-color="#FFF" fill="rgba(240,20,20,.8)" style="border: 0px">
                <el-radio-button label="7"></el-radio-button>
                <el-radio-button label="15"></el-radio-button>
                <el-radio-button label="30"></el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div id="detail_num_trend" style="width: 100%;height: 300px">
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'CourseAna',
  data () {
    return {
      courseData: [],
      selectCourseId: '',
      activeName: '1',
      lastCount: 0,
      total: 0,
      courseDetailLastCount: 0,
      courseDetailTotal: 0,
      day: '30',
      detailDay: '30',
      zonData: {
        xdata: [],
        ydata: []
      },
      detailData: {
        xdata: [],
        ydata: []
      },
      sexData: [],
      progressData: []
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    this.getLastStudy()
    this.getCountStudy()
    this.getStudyAna(this.day)
  },
  methods: {
    // 标签点击
    handleClick (tab, event) {
      // eslint-disable-next-line eqeqeq
      if (tab.name == 0) {
        this.getPageCourse()
      }
    },
    getLastStudy () {
      var _this = this
      this.$axios.post('/api/study/getLastCountStudy',
        this.$qs.stringify({
          queryData: JSON.stringify({
            userId: this.user.userId
          })
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.lastCount = data.result
        }
      })
    },
    getCountStudy () {
      var _this = this
      this.$axios.post('/api/study/getCountStudy',
        this.$qs.stringify({
          queryData: JSON.stringify({
            userId: this.user.userId
          })
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.total = data.result
        }
      })
    },
    getStudyAna (day) {
      this.zonData.xdata = []
      this.zonData.ydata = []
      var _this = this
      var queryData = {}
      queryData.userId = this.user.userId
      queryData.day = day
      this.$axios.post('/api/study/getAnaStudy',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          for (var i = 0; i < data.result.length; i++) {
            _this.zonData.ydata.push(data.result[i].count)
            _this.zonData.xdata.push(data.result[i].date)
          }
          _this.drawTrend()
        }
      })
    },
    getStudyAnaDetail () {
      this.detailData.xdata = []
      this.detailData.ydata = []
      var _this = this
      var queryData = {}
      queryData.userId = this.user.userId
      queryData.courseId = this.selectCourseId
      queryData.day = this.detailDay
      this.$axios.post('/api/study/getAnaStudy',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          for (var i = 0; i < data.result.length; i++) {
            _this.detailData.ydata.push(data.result[i].count)
            _this.detailData.xdata.push(data.result[i].date)
          }
          _this.drawDetailTrend()
        }
      })
    },
    drawTrend () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('show_trend'))
      // 绘制图表
      myChart.setOption({
        title: { text: '新增学习人数' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            show: true,
            type: 'line',
            snap: true,
            axis: 'x'
          }
        },
        xAxis: {
          data: this.zonData.xdata
        },
        yAxis: {},
        series: [{
          name: '新增学习人数',
          type: 'line',
          // smooth: true,
          // symbol: 'none',
          stack: 'a',
          areaStyle: {
            normal: {}
          },
          data: this.zonData.ydata
          // itemStyle: {normal: {label: {show: true}}}
        }]
      })
    },
    drawDetailTrend () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('detail_num_trend'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            show: true,
            type: 'line',
            snap: true,
            axis: 'x'
          }
        },
        xAxis: {
          data: this.detailData.xdata
        },
        yAxis: {},
        series: [{
          name: '新增学习人数',
          type: 'line',
          // smooth: true,
          // symbol: 'none',
          stack: 'a',
          areaStyle: {
            normal: {}
          },
          data: this.detailData.ydata
          // itemStyle: {normal: {label: {show: true}}}
        }]
      })
    },
    // 获取课程
    getPageCourse () {
      var _this = this
      var userId = this.$store.state.user.userId
      this.$axios.post('/api/course/getCourseToShow',
        this.$qs.stringify({
          userId: userId
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.courseData = data.result
            _this.selectCourseId = data.result[0].courseId
            _this.toDoDetail()
          }
        })
    },
    getDetailLastStudy () {
      var _this = this
      this.$axios.post('/api/study/getLastCountStudy',
        this.$qs.stringify({
          queryData: JSON.stringify({
            userId: this.user.userId,
            courseId: this.selectCourseId
          })
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.courseDetailLastCount = data.result
        }
      })
    },
    getDetailCountStudy () {
      var _this = this
      this.$axios.post('/api/study/getCountStudy',
        this.$qs.stringify({
          queryData: JSON.stringify({
            userId: this.user.userId,
            courseId: this.selectCourseId
          })
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.courseDetailTotal = data.result
        }
      })
    },
    getSexData () {
      var _this = this
      this.$axios.post('/api/study/getAnaSex',
        this.$qs.stringify({
          courseId: this.selectCourseId
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.sexData = data.result
          _this.drawSex()
        }
      })
    },
    getProgressData () {
      var _this = this
      this.$axios.post('/api/study/getAnaPro',
        this.$qs.stringify({
          courseId: this.selectCourseId
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.progressData = data.result
          _this.drawProgress()
        }
      })
    },
    // 课程详情性别
    drawSex () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('sexAna'), 'light')
      myChart.setOption({
        title: {
          text: '学员性别',
          top: 'center',
          left: 'center',
          textStyle: {
            fontSize: 14,
            color: '#666666',
            padding: [10, 0]
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 2,
          left: 'center',
          data: ['男', '女', '未知']
        },
        series: [
          {
            name: '学员性别',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.sexData
          }
        ]
      })
    },
    // 课程详情学习进度
    drawProgress () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('progressAna'), 'light')
      myChart.setOption({
        title: {
          text: '学习进度统计',
          top: 'center',
          left: 'center',
          textStyle: {
            fontSize: 14,
            color: '#666666',
            padding: [10, 0]
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 2,
          left: 'center',
          data: ['20%一下', '20%-80%', '80%以上']
        },
        series: [
          {
            name: '学习进度',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.progressData
          }
        ]
      })
    },
    toDoDetail () {
      this.getDetailCountStudy()
      this.getDetailLastStudy()
      this.getStudyAnaDetail(this.detailDay)
      this.getSexData()
      this.getProgressData()
    }
  }
}
</script>

<style scoped>
  .data_column {
    width: 450px;
    margin: 10px;
    text-align: center;
    display: inline-block;
  }
  .data_column .data_title{
    margin-top: 20px;
  }
  .data_column .data_num{
    margin: 10px 0px 20px;
  }
  .shuoming_div{
    background-color: #f9f9f9;
    height: 35px;
    margin-bottom: 15px;
    line-height: 35px;
    padding-left: 10px;
    border-left: 2px solid green;
    text-align: left;
  }
  .shuoming_div span{
    font-size: 20px;
  }
  .drawDiv{
    display: inline-block;
    width:410px;
    height: 300px;
    background-color: #f1f1f1;
    padding: 20px;
  }
</style>
